<template>


     姓名 <el-input v-model="page.Name" style="width: 150px;" />
     时间 <el-date-picker
        v-model="page.StartData"
        type="datetime"
        placeholder="开始时间"
        format="YYYY/MM/DD HH:mm:ss"
      />
      -
      <el-date-picker
        v-model="page.EndData"
        type="datetime"
        placeholder="结束时间"
        format="YYYY/MM/DD HH:mm:ss"
      />

      状态: <el-select v-model="page.ApprovalStatus" placeholder="请选择状态" style="width: 150px;">
        <el-option label="全部" value="" />
        <el-option label="待审批" :value="101" />
        <el-option label="审批中" :value="102" />
        <el-option label="已通过" :value="103" />
        <el-option label="已拒绝" :value="104" />
      </el-select>

<el-button type="primary" @click="getleave">查询</el-button>


    <el-table :data="tableData" border style="width: 100%;margin-top: 30px;">
      <el-table-column fixed prop="leaveId" label="编号" width="80" />
      <el-table-column prop="name" label="申请人" width="120" />
      <el-table-column prop="depentmentId" label="部门" width="120">
        <template v-slot="scope">
          <span v-if="scope.row.depentmentId==1">IT信息部</span>
          <span v-if="scope.row.depentmentId==2">人力资源部</span>
          <span v-if="scope.row.depentmentId==3">财务部</span>
          <span v-if="scope.row.depentmentId==4">销售部</span>
          <span v-if="scope.row.depentmentId==5">行政部</span>
        </template>
      </el-table-column>
      <el-table-column prop="leaveType" label="请假类别" width="120" >
        <template v-slot="scope">
          <span v-if="scope.row.leaveType==101">事假</span>
          <span v-if="scope.row.leaveType==102">病假</span>
          <span v-if="scope.row.leaveType==103">婚假</span>
          <span v-if="scope.row.leaveType==104">丧假</span>
          <span v-if="scope.row.leaveType==105">产假</span>
          <span v-if="scope.row.leaveType==106">补休</span>
          <span v-if="scope.row.leaveType==107">工伤</span>
          <span v-if="scope.row.leaveType==108">其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="startData" label="请假时间" width="350" >
        <template v-slot="scope">
            {{scope.row.startData.substring(0,10)+" "+scope.row.startData.substring(11,19) +'至'+scope.row.endData.substring(0,10)+" "+scope.row.endData.substring(11,19)}}
        </template>
      </el-table-column>
      <el-table-column prop="totalDays" label="总工时(H)" width="120">
        <template v-slot="scope">
            {{scope.row.totalDays*8+scope.row.totalHours}}
        </template>
      </el-table-column>
      <el-table-column prop="checkData" label="报到时间" width="180" >
        <template v-slot="scope">
            {{scope.row.checkData.substring(0,10)+" "+scope.row.checkData.substring(11,19)}}
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="请假事由" width="180" />
      <el-table-column prop="approvalStatus" label="审批状态" width="120">
        <template v-slot="scope">
          <span v-if="scope.row.approvalStatus==101">待审批</span>
          <span v-if="scope.row.approvalStatus==102">审批中</span>
          <span v-if="scope.row.approvalStatus==103">已通过</span>
          <span v-if="scope.row.approvalStatus==104">已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column prop="depName" label="部门领导" width="200" />
      

      <el-table-column prop="createTime" label="申请时间" width="200">
        <template v-slot="scope">
            {{scope.row.createTime.substring(0,10)+" "+scope.row.createTime.substring(11,19)}}
        </template>
      </el-table-column>
      <el-table-column prop="leaveRember" label="驳回原因" width="200" >
        <template v-slot="scope">
            <p v-if="scope.row.leaveRember==null">无</p>
            <p v-else>{{ scope.row.leaveRember }}</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="150">
        <template #default="scope">
          <el-button v-show="Store.CurrLoginUser.UserName==scope.row.name&&scope.row.levelId!=2" link type="danger" size="small" @click="DeleteLevel(scope.row.leaveId)">删除</el-button>
          <el-button v-show="Store.CurrLoginUser.UserName==scope.row.name&&scope.row.levelId!=2" link type="primary" size="small" @click="updatelevel(scope.row.leaveId)">编辑</el-button>
          <el-button v-show="Store.CurrLoginUser.levelId==scope.row.levelId&&scope.row.approvalStatus==102&&tableStop.count==0||Store.CurrLoginUser.levelId==scope.row.levelId&&scope.row.approvalStatus==101&&tableStop.count==0" link type="success" size="small" @click="shenpi(scope.row.leaveId);">审批</el-button>
          <el-button link type="warning" size="small" @click="Xiangqing(scope.row.leaveId);">查询详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="page.pageindex"
      v-model:page-size="page.pagesize"
      :page-sizes="[15, 20, 30, 40]"
     
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    />
  </div>

  </template>
  
  <script lang="ts" setup>
  import { ref, computed, onMounted, onUnmounted,reactive} from 'vue';
  import { ElMessage,ElMessageBox, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
  import axios from 'axios'
  import {useRouter,useRoute} from 'vue-router'
  import {useCounterStore} from '@/stores/counter'
import Xiangqinmg from './xiangqinmg.vue';

let router=useRouter();
let route=useRoute();
let Store=useCounterStore();
//监听分页变量
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
    page.pagesize=val;
    getleave()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  page.pageindex=val;
    getleave()
}
//钩子函数
onMounted(()=>{
    getleave();
    console.log('ok啊家人们',route.query.id)
    if (route.query.id !=null) {
    // 执行需要触发的逻辑（例如调用 API 或操作 DOM）
      optinm();
    console.log('跳转后触发的动作');
  }
   
})

//变量
const tableStop=reactive({
  count:0
});

const optinm=()=>{
  axios({
    url:'http://localhost:5284/api/Level/QueryAppro',
    method:'get',
    params:{
      DepenmentId:Store.CurrLoginUser.depenmentId,
      LeaveApplicationId:route.query.id,
      ApproverId:Store.CurrLoginUser.userId
    }
  })
  .then(res=>{
    if(res.data.code==101){
      console.log('表单id',route.query.id)
      tableStop.count=res.data.data
      console.log('本条数据记录表审批数量',tableStop.count)
    }
  })
}


const Xiangqing=(id:any)=>{
  router.push({
    name:"xiangqinmg",
    query:{
      id:id
    }
  })
}


//查询请假申请所需数据
const page=reactive({
pageindex:1,
pagesize:15,
totalpage:0,
totalcount:0,
UserId:Store.CurrLoginUser.userId,
UserName:Store.CurrLoginUser.UserName,
LevelId:Store.CurrLoginUser.levelId,
DepentmentId:Store.CurrLoginUser.depenmentId,
Name:'',
StartData:'',
EndData:'',
ApprovalStatus:''
})
//分页查询请假申请方法
const getleave=()=>{
    axios({
        url:'http://localhost:5284/api/Level/QueryLevel',
        method:'get',
        params:{
        Pageindex:page.pageindex,
        PageSize:page.pagesize,
        UserName:page.UserName,
        LevelId:page.LevelId,
        DepentmentId:page.DepentmentId,
        Name:page.Name,
        StartData:page.StartData,
        EndData:page.EndData,
        ApprovalStatus:page.ApprovalStatus
        }
    })
    .then(res=>{
        if(res.data.code=101){
          console.log('分页查询请假申请数据',res.data)
            tableData.value=res.data.list;
            page.totalcount=res.data.totalCount;
            page.totalpage=res.data.totalPage;
        }
    })
}
//接受请假申请数据的变量
const tableData = ref([]);
//删除请假申请
const DeleteLevel=(leaveId:any)=>{

  ElMessageBox.confirm(
    '您确认要操作嘛?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios({
      url:'http://localhost:5272/api/Leave/DeleteLeave',
      method:'delete',
      data:{
             leaveId:leaveId
      }
    })
  .then(res=>{
  if(res.data.code==101){
    ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getleave();
  }
})
.catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
    })
}
//跳转到修改页面的方法
const updatelevel=(leaveId:any)=>{
  console.log(leaveId)
  router.push({
    name:"UpdateLeave",
    query:{
      id:leaveId
    }
  })
}

  //跳转到审批页面的方法
  const shenpi=(levelId:any)=>{
    console.log(levelId)
    router.push({
        name:'ApprovalView',
        query:{
           id:levelId
        }
    })
  }

  </script>
  